<!--
  Generated template for the ConsigneeWaitPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>待提货</ion-title>
    <img right src="assets/qcfw/images/img-sm.png" (click)="scanLading()"
         style="float: right;position: absolute;right: 20px;top: 13px;width: 20px;"/>
  </ion-navbar>

  <!--<ion-searchbar #searchBar
                 mode="ios"
                 placeholder="搜索" [(ngModel)]="serch" (ngModelChange)="">
  </ion-searchbar>-->

  <div class="list_search_header">
    <input placeholder="搜索服务订单，可模糊搜索" [(ngModel)]="serch">
    <span (click)="queryLadingWait(serch)">搜索</span>
  </div>
</ion-header>


<ion-content padding (ionScroll)="scrollContent()">
  <ion-refresher (ionRefresh)="refresh($event)" pullMax="300">
    <ion-refresher-content
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="正在刷新...">
    </ion-refresher-content>
  </ion-refresher>
  <!--<ion-item>
    <ion-input placeholder="输入单号"
               class="bgcolor_ font_black_111 mt0 mb0" style="height: 25px; border-radius: 20px;">

    </ion-input>
  </ion-item>-->

  <ng-container *ngIf="datas.length>0">
    <div class="qd_list mt10">
      <ng-container *ngFor="let data of datas; let i = index">
        <div class="qd_item">
          <div class="qd_header bor_bottom">
            <div class="w12 qd_address">{{data.ZCDH}}</div>
            <div class="w12 mt10">
              <span class="w12 tl mt10"><barcode class="" [value]="data.ORDERID"></barcode></span>
              <span class="w12 tl mt10">
                  <span class="w04 "><i class="fa fa-user-circle mr5"></i>{{data.NAME}}</span>
                  <span class="w04 "><i class="fa fa-phone-square mr5"></i>{{data.MOBILE}}</span>
                  <span class="w04 "><i class="fa fa-file-text mr5"></i>{{data.ID}}</span>
                </span>
              <span class="w12 tl mt10">
                  <span class="w06 ">业务单号：{{data.ORDERID}}</span>
                  <span class="w06 ">购置商城：{{data.GZSC}}</span>
                </span>
            </div>
          </div>
          <div class="qd_body bor_bottom">
            <!--<ng-container *ngFor="let pro of data.CSM_SORDERITEM">-->
            <div class="w12 mt10">
              <h3 class="w10">{{data.EXTSKUNAME}}</h3>
              <span class="w02 tr">× {{data.NUM}}</span>
            </div>
            <!--</ng-container>-->
          </div>
          <div class="qd_footer">
            <button class="mt10" ion-button (click)="setLading(data.ID,data.LINE)">已提货</button>
          </div>
        </div>
      </ng-container>
    </div>
    <div *ngIf="datasConfig?.isEnd" class="w12 mt20 mb20 tc font_gray">
      ------------------------ 已经到底了 ------------------------
    </div>
    <ion-infinite-scroll (ionInfinite)="getMoreWaitDatas($event)" threshold="100px" [enabled]="!datasConfig?.isEnd">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="数据加载中...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ng-container>
  <ng-container *ngIf="datas.length<=0">
    <div style="text-align: center;width: 100%;height: 100%;padding-top: 50%;padding-bottom: 50%">
      <div padding text-center class="pt0">
        <span class="font_gray font_size_standard">扫码获取提货信息</span>
      </div>
      <div padding text-center>
        <button ion-fab (click)="scanLading()" style="margin: 0 auto;width: 120px;height: 120px;font-size: 25px;">
          <img src="assets/qcfw/images/img-sm.png">
        </button>
      </div>
    </div>
  </ng-container>

  <ion-fab bottom right *ngIf="!isScrollDown">
    <button ion-fab mini color="light" (click)="refresh()">
      <ion-icon name="md-refresh"></ion-icon>
    </button>
  </ion-fab>
</ion-content>
